<template>
	<view class="u-radio-group u-clearfix">
		<slot></slot>
	</view>
</template>

<script>
	import Emitter from '../../libs/util/emitter.js';
	
	export default {
		name: "u-radio-group",
		mixins: [Emitter],
		props: {
			
			disabled: {
				type: Boolean,
				default: false
			},
			
			value: {
				type: [String, Number],
				default: ''
			},
			
			activeColor: {
				type: String,
				default: '#2979ff'
			},
			
			size: {
				type: [String, Number],
				default: 34
			},
			
			labelDisabled: {
				type: Boolean,
				default: false
			},
			
			shape: {
				type: String,
				default: 'circle'
			},
			
			iconSize: {
				type: [String, Number],
				default: 20
			},
			
			width: {
				type: [String, Number],
				default: 'auto'
			},
			
			wrap: {
				type: Boolean,
				default: false
			}
		},
		created() {
			
			this.children = [];
		},
		watch: {
			
			parentData() {
				if(this.children.length) {
					this.children.map(child => {
						
						typeof(child.updateParentData) == 'function' && child.updateParentData();
					})
				}
			},
		},
		computed: {
			
			
			
			parentData() {
				return [this.value, this.disabled, this.activeColor, this.size, this.labelDisabled, this.shape, this.iconSize, this.width, this.wrap];
			}
		},
		methods: {
			
			setValue(val) {
				
				
				this.children.map(child => {
					if(child.parentData.value != val) child.parentData.value = '';
				})
				
				this.$emit('input', val);
				this.$emit('change', val);
				
				
				setTimeout(() => {
					
					this.dispatch('u-form-item', 'on-form-change', val);
				}, 60)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";
	
	.u-radio-group {
		/* #ifndef MP || APP-NVUE */
		display: inline-flex;
		flex-wrap: wrap;
		/* #endif */
	}
</style>
